<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>第一课-计算机动漫简史</title>
    <!--视口 不缩放 -->
    <link rel="shortcut icon" th:href="@{/img/icon.gif}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/zui/1.7.0/css/zui.min.css" rel="stylesheet">
    <link th:href="@{/css/main.css}" rel="stylesheet">
    <link th:href="@{/css/lesson1.css}" rel="stylesheet">
</head>

<body>
    <div id="page">
        <!-- Header -->
        <header>
            <div class="container" th:replace="header::pagination">
            </div>
        </header><!-- header end -->
        <section class="details-head container pt-40 mb-20">
            <div class="row">
                <div class="col-md-12 clearfix breadcrumb_box mb-20 hide-sm">
                    <ol class="breadcrumb">
                        <li><a th:href="@{'/index'}"><i class="icon icon-home"></i> 首页</a></li>
                        <li class="active" th:text="${lesson.title}"></li>
                    </ol>
                </div>
                <div class="col-md-6 details-head-img mb-20"><img th:src="${lesson.image}"></div>
                <div class="col-md-6 details-head-text mb-20">
                    <h1 class="pt-20 mb-40"><span th:text="${lesson.name}"></span><span th:text="${lesson.title}"></span></h1>
                    <div class="con-group">
                        <p class="con-title">课程简介：</p>
                        <div th:text="${lesson.desc}"></div>
                    </div>
                </div>
            </div>
        </section>
        <section class="details-content">
            <div class="main container dibu main-pt-m">
                <div class="content">
                    <article id="post-111596" class="post-111596 post type-post status-publish format-standard has-post-thumbnail hentry category-hangye category-citiaogc tag-405 tag-92 tag-1745">
                        <div class="entry">
                            <div class="entry-content clearfix" th:each="item:${contentList}">
                                <div class="para-title lemma-anchor level-2" name="index-0" th:if="${item.type==1}">
                                    <h1 id="index-0" th:text="${item.content}"></h1>
                                </div>
                                <p th:if="${item.type==2}" th:text="${item.content}"></p>
                                <p th:if="${item.type==3}"><img class="aligncenter size-full j-lazy" th:src="${item.content}" alt="计算机动画" width="529" height="274" /></p>
                                <h3 th:if="${item.type==4}" th:text="${item.content}"></h3>
                                <video th:if="${item.type==5}" th:src="${item.content}" controls></video>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </section>
        <footer>
            <div class="container">
                <div class="col-xs-3"><br>
                    <img th:src="@{/img/logo.png}" width="120">
                    <p>计算机动漫与游戏设计在线学习系统</p>
                    <p>课程内容版权均归
                        <br>Freestudy有限公司所有
                    </p>
                </div>
                <div class="col-xs-3">
                    <h2>服务中心</h2>
                    <p>共建共享课程服务协议</p>
                    <p>侵权投诉</p>
                    <p>问题反馈</p>
                    <p>用户操作说明</p>
                    <p>加入共建课程</p>
                </div>
                <div class="container">
                    <div class="col-xs-3">
                        <h2>相关链接</h2>
                        <p>中华人民共和国教育部</p>
                        <p>中华人民共和国工业和信息化部</p>
                        <p>中国职业教育教学指导网</p>
                        <p>教育部职业技术教育中心研究所</p>
                    </div>
                    <div class="col-xs-3">
                        <h2>联系我们</h2>
                        <p>咨询热线：17352900411</p>
                        <p>电子邮箱：674865356@qq.com</p>
                        <br>
                        <br>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</body>

</html>
